<template>
    <view class="savepadding">
        <u-search shape="square"
                  border="none"
                  v-model="keywords"
                  bgColor="#fff"
                  placeholder="请输入客户名称/联系人/手机号/业务员"
                  placeholderColor="#CDCDCD"
                  :showAction="false"
                  @search="onsearch"
                  @change="onsearch"></u-search>
        <view class="select-wrap">
            <view class="select"
                  @click="onselect(1)">
                <text>{{conditionkey1}}</text>
                <u-icon name="arrow-down"></u-icon>
            </view>
            <view class="select"
                  @click="onselect(2)">
                <text>{{conditionkey2}}</text>
                <u-icon name="arrow-down"></u-icon>
            </view>
            <view class="select"
                  @click="onselect(3)">
                <text>{{conditionkey3}}</text>
                <u-icon name="arrow-down"></u-icon>
            </view>
            <view class="select"
                  @click="onselect(4)">
                <text>{{conditionkey4}}</text>
                <u-icon name="arrow-down"></u-icon>
            </view>
        </view>
        <view>
            <template v-for="item in list">
                <Cardqianyue :key="item.id"
                             :item="item"></Cardqianyue>
            </template>
            <u-empty mode="list"
                     marginTop="200"
                     v-if="!list.length"></u-empty>
            <u-loadmore :status="loadingStatus"
                        @loadmore="loadmore"
                        v-else></u-loadmore>
        </view>
        <u-picker :show="showcondition1"
                  :columns="conditionlist1"
                  keyName="label"
                  @cancel="cancel1"
                  @confirm="onconfirm1"></u-picker>
        <u-picker :show="showcondition2"
                  :columns="conditionlist2"
                  keyName="label"
                  @cancel="cancel2"
                  @confirm="onconfirm2"></u-picker>
        <u-picker :show="showcondition3"
                  :columns="conditionlist3"
                  keyName="label"
                  @cancel="cancel3"
                  @confirm="onconfirm3"></u-picker>
        <u-datetime-picker :show="showcondition4"
                           :formatter="formatter"
                           mode="date"
                           ref="datetimePicker"
                           v-model="conditionlist4"
                           @cancel="cancel4"
                           @confirm="onconfirm4"></u-datetime-picker>
    </view>
</template>

<script>
import Cardqianyue from '@/components/mmv-ui/card-qianyue.vue'
import * as orderApi from '@/api/order-api'

export default {
    components: {
        Cardqianyue,
    },
    data() {
        return {
            showcondition1: false,
            showcondition2: false,
            showcondition3: false,
            showcondition4: false,
            conditionlist1: [[
                // { label: '全部', id: 0 },
                { label: '个人', id: 2 },
                { label: '企业', id: 1 },
            ]],
            conditionlist2: [[
                // { label: '全部', id: 0 },
                // { label: '经租', id: 0 },
                // { label: '以租代购', id: 0 },
                // { label: '融租', id: 0 },
            ]],
            conditionlist3: [[
                // { label: '全部', id: 0 },
                // { label: '待签约', id: 0 },
                // { label: '签约中', id: 1 },
                { label: '签约成功', id: 1 },
                // { label: '签约失败', id: 3 },
                { label: '已解约', id: 2 },
            ]],
            conditionlist4: new Date().getTime(),
            conditionkey1: '客户类型',
            conditionkey2: '签约业务类型',
            conditionkey3: '签约状态',
            conditionkey4: '签约时间',
            conditionvalue1: {},
            conditionvalue2: {},
            conditionvalue3: {},
            conditionvalue4: '',
            loadingStatus: 'loadmore',
            list: [],
            pageNo: 1, // 页码，不传默认为1
            pageSize: 10, // 行数 不传默认为10
            keywords: '', // 搜索关键字
        };
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo || {};
        },
        formData() {
            const params = {
                params: {
                    pageNo: this.pageNo, // 页码，不传默认为1
                    pageSize: this.pageSize, // 行数 不传默认为10
                },
                // keyword: this.keyword, // 搜索关键字
                // decutionStatus: this.conditionvalue3.id, // 扣款状态：1扣款成功 2扣款失败 3部分成功 4扣款中 5已解约
                // businessId: this.aaaaaa, // 业务类型id
                // signOrderdateType: 7, // 日期条件类型：1、今日 2、昨日 3、本周 4、本月 5、本年 6、全部 7、自定义
                // signOrderdateStart: this.conditionvalue4, // 开始时间（yyyy-mm-dd）
                // signOrderdateEnd: this.aaaaaa, // 结束时间（yyyy-mm-dd）
                // customerId: this.userInfo.userId, // 客户id
                createUserId: this.userInfo.userId, // 客户id
            };
            // 搜索关键字
            if (!uni.$u.test.isEmpty(this.keywords)) {
                // params.keywords = this.keywords;
                params.keyword = this.keywords;
            }
            // 客户类型
            if (!uni.$u.test.isEmpty(this.conditionvalue1)) {
                params.customerType = this.conditionvalue1.id;
            }
            // 签约订单状态
            if (!uni.$u.test.isEmpty(this.conditionvalue3)) {
                params.orderStatus = this.conditionvalue3.id;
            }
            // 业务类型id
            if (!uni.$u.test.isEmpty(this.conditionvalue2)) {
                params.businessType = this.conditionvalue2.id;
            }
            // 日期条件类型：1、今日 2、昨日 3、本周 4、本月 5、本年 6、全部 7、自定义
            if (!uni.$u.test.isEmpty(this.conditionvalue4)) {
                params.signOrderdateType = 1;
                params.signDate = this.conditionvalue4; // 开始时间（yyyy-mm-dd）
                // params.signOrderdateStart = this.conditionvalue4; // 开始时间（yyyy-mm-dd）
                // params.signOrderdateEnd = this.conditionvalue4; // 开始时间（yyyy-mm-dd）
            }
            return params;
        },
    },
    onReady() {
        // 微信小程序需要用此写法
        this.$refs.datetimePicker.setFormatter(this.formatter);
    },
    async mounted() {
        await this.getBusinessData();
        this.list = await this.getData();
        uni.$on('shoudongkoukuan', async () => {
            this.list = await this.reload();
        });
    },
    destoryed() {
        uni.$off('shoudongkoukuan');
    },
    methods: {
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },
        async getData() {
            uni.showLoading({
                title: '加载中'
            });
            try {
                const result = await orderApi.signOrderList(this.formData);
                console.log(result);
                const list = result.data || [];
                if (!uni.$u.test.isEmpty(list)) {
                    this.pageNo += 1;
                }
                uni.hideLoading()
                return list;
            } catch (error) {
                uni.hideLoading()
                console.log(error)
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 获取扣款业务类型
         */
        async getBusinessData() {
            try {
                const result = await orderApi.getBusinessData();
                this.conditionlist2 = [result.data.map(val => {
                    return {
                        id: val.id,
                        label: val.businessName,
                    }
                })];
            } catch (error) {
                return Promise.reject(error);
            }
        },
        onsearch() {
            //输入框自动搜索，防抖处理
            uni.$u.debounce(() => {
                this.reload();
            }, 1000);
        },
        onselect(index) {
            this[`showcondition${index}`] = true;
        },
        onconfirm1({ value }) {
            this.showcondition1 = false;
            this.conditionkey1 = value[0].label;
            this.conditionvalue1 = value[0];
            this.reload();
        },
        cancel1() {
            this.showcondition1 = false;
            this.conditionkey1 = '客户类型';
            this.conditionvalue1 = {};
            this.reload();
        },
        onconfirm2({ value }) {
            this.showcondition2 = false;
            this.conditionkey2 = value[0].label;
            this.conditionvalue2 = value[0];
            this.reload();
        },
        cancel2() {
            this.showcondition2 = false;
            this.conditionkey2 = '签约业务类型';
            this.conditionvalue2 = {};
            this.reload();
        },
        onconfirm3({ value }) {
            this.showcondition3 = false;
            this.conditionkey3 = value[0].label;
            this.conditionvalue3 = value[0];
            this.reload();
        },
        cancel3() {
            this.showcondition3 = false;
            this.conditionkey3 = '签约状态';
            this.conditionvalue3 = {};
            this.reload();
        },
        onconfirm4({ value }) {
            const _value = this.$u.timeFormat(value);
            this.showcondition4 = false;
            this.conditionkey4 = _value;
            this.conditionvalue4 = _value;
            this.reload();
        },
        cancel4() {
            this.showcondition4 = false;
            this.conditionkey4 = '签约时间';
            this.conditionvalue4 = '';
            this.reload();
        },
        async reload() {
            this.pageNo = 1;
            this.list = await this.getData();
        },
        async loadmore() {
            const list = await this.getData();
            this.list = [...this.list, ...list];
            this.showloading = true;
            this.loadingStatus = 'loading';
            if (uni.$u.test.isEmpty(list)) {
                this.loadingStatus = 'nomore';
            } else {
                this.loadingStatus = 'loadmore'
            }
        },
        onPullDownRefresh() {
            this.reload();
        },
        onReachBottom() {
            this.loadmore();
        }
    },
}
</script>

<style lang="scss" scoped src="@/styles/mmv.scss"></style>